<template>
    <div class="room">
       <el-table size="small" :data="pagedRoomList" width="98">
        <el-table-column label="编号" width="180" type="index"/>
        <el-table-column v-if="false" prop="id" label="编号" width="100"/>
        <el-table-column prop="roomType" label="房间名称" width="100"/>
        <el-table-column prop="price" label="房间价格" width="180"/>
        <el-table-column prop="roomImage" label="房间图片" width="180">
            <template #default="scope">
            <div class="demo-image__preview" v-if="scope.row.roomImageList">
                <el-image
                style="width: 100px; height: 100px"
                :src="scope.row.roomImageList[0]"
                :zoom-rate="1.2"
                :max-scale="7"
                :min-scale="0.2"
                :preview-src-list="scope.row.roomImageList"
                :initial-index="4"
                fit="cover"
                />
            </div>
            </template>
        </el-table-column>
        <el-table-column prop="peopleNum" label="房间容纳人数" width="180"/>
        <el-table-column prop="roomStatus" label="房间状态" width="150"/>
        
        </el-table>
        <el-pagination
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalItems"
        :page-size="pageSize"
        :current-page="currentPage"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[5, 10, 20, 50]"
        />
    </div>
</template>

<script setup lang="ts">
// import { ref,onMounted,computed } from 'vue';
// import { $roomList } from "../../api/room.ts";
// let roomList = ref([])
// //加载房间列表
// const loadRoomList = async()=>{
//     roomList.value = await $roomList(); 
//     console.log(roomList.value);
    
// }
// const formattedRoomImages = computed(() => {
//   return roomList.value.map(item => {
//     if (item.roomImage) {
//       item.roomImageList = item.roomImage.split(';');      
//     }
//     return item;
//   });
// });


// onMounted(()=>{
//     loadRoomList()
// })
import { ref, onMounted, computed, watch } from 'vue';
import { $roomList } from "../../api/room.ts";

let roomList = ref([]);
let pagedRoomList = ref([]);

const currentPage = ref(1);
const pageSize = ref(5);
const totalItems = ref(0);

// 加载房间列表
const loadRoomList = async () => {
  roomList.value = await $roomList();
  totalItems.value = roomList.value.length;
  updatePagedRoomList();
};

const formattedRoomImages = computed(() => {
  return roomList.value.map(item => {
    if (item.roomImage) {
      item.roomImageList = item.roomImage.split(';');
    }
    return item;
  });
});

const updatePagedRoomList = () => {
  const start = (currentPage.value - 1) * pageSize.value;
  const end = start + pageSize.value;
  pagedRoomList.value = formattedRoomImages.value.slice(start, end);
};

const handleSizeChange = (newSize: number) => {
  pageSize.value = newSize;
  updatePagedRoomList();
};

const handleCurrentChange = (newPage: number) => {
  currentPage.value = newPage;
  updatePagedRoomList();
};


//退房
const handleCheckOut = async(id:number) =>{
  console.log(id);
  let ret = await $checkOut({id});
  if(ret.code === 2001){
    ElNotification({
        title: '成功！',
        message: '恭喜你，删除成功！',
        type: 'success',
    })
  }
  
}
onMounted(() => {
  loadRoomList();
});
</script>

<style lang="scss" scoped>

</style>